<template>
	<view>
		<view class="swiper-banner-container" :style="'height:' + swiperHeight + 'rpx'" v-if="bannerInfo.length > 1 || alwaysBanner">
			<swiper interval="5000" duration="500" autoplay="true" circular="true"
			 class="swiper-banner" @change="onBannerSwpierChange">
				<swiper-item v-for="(item, itemIndex) in bannerInfo" :key="itemIndex">
					<view :style="'height:' + swiperHeight + 'rpx'" @click="goToPage(item.linkType, item.linkValue, itemIndex)"
					class="exposure" :data-id="item.linkValue" :data-index="itemIndex+1" :data-type="item.linkType" :data-moduleOrder="moduleOrder" :data-moduleType="'banner'">
						<image :src="item.bannerImageUrl" class="swiper-banner-img"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-indicator-dots">
				<view  v-for="(item, itemIndex) in bannerInfo" :key="itemIndex" class="dot" :class="current == itemIndex ? 'active' : ''">
				</view>
			</view>
		</view>
		<view class="middle-banner" :class="{full : bannerInfo[0].isFull, round: !bannerInfo[0].isRound}"  v-if="bannerInfo.length == 1 && !alwaysBanner" >
			<view @click="goToPage(bannerInfo[0].linkType, bannerInfo[0].linkValue, 0)"
			class="exposure" :data-id="bannerInfo[0].linkValue" :data-index="1" :data-type="bannerInfo[0].linkType" :data-moduleOrder="moduleOrder" :data-moduleType="'banner'">
				<image class="middle-banner-img" :src="bannerInfo[0].bannerImageUrl" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '@/ext/utils.js';
import handleTouch from '@/ext/handleTouch.js';
export default{
	mixins: [handleTouch],
	props:{
		initializationParams: {
			type: [String, Array],
			default: ''
		},
		fragmentId: {
			type: Number | String,
			default: ''
		},
		swiperHeight: {
			type: Number,
			default: 368
		},
		alwaysBanner: {
			type: Boolean,
			default: false
		},
		//来源模块在页面的排序序号
		moduleOrder: {
			type: [Number,String],
			default: 0
		}
	},
	data(){
		return{
			current: 0,
			bannerInfo: [],
			entrance:this.$globalData.state.entrance
		}
	},
	watch:{
		initializationParams: {
			handler(newVal) {
				if (!newVal) return
				let list = typeof(newVal) == 'string' ? JSON.parse(this.initializationParams) : newVal;
				this.bannerInfo = this.handleBannerList(list)
			},
			immediate: true
		}
	},
	methods:{
		handleBannerList(list) {
			let result = [];
			for (let item of list) {
				// if(item.linkType != 105 || this.entrance !='mp-weixin'){
					result.push(item);
				// }
			}
			return result
		},
		onBannerSwpierChange(e) {
			this.current = e.detail.current;
		},
		goToPage: utils.Throttle(function(type, value, i) {
			this.$stat('click', {
				Column_ID: 'M' + this.fragmentId,
				Key_Type: type,
				Key_Word: value,
				Position_ID: i + 1
			})
			try {
				this.exposure.handleClick(value);
			} catch (e) {
				//TODO handle the exception
			}
			//1001为banner组件
			var statInfo = {'Ref_Module_Type':type,'Ref_Module_ID':'1001','Ref_Module_Order':this.moduleOrder,'Ref_Module_Inner_Order':i+1}
			if(type == "105"){//如果跳转外链，先曝光
				try {
					this.exposure.report();
				} catch (e) {
					//TODO handle the exception
				}
			} else if (type=='404') {
				this.$emit('upDataView')
				this.$utils.toast('活动还没开始，请耐心等待哦~')
				return
			}
			this.$utils.handleLink(type, value,this.bannerInfo[i],{statInfo:statInfo},this.fragmentId)
		}, 800)
	}
}
</script>

<style lang="scss" scoped>
.swiper-banner-container{
	position: relative;
	width: 750rpx;
	.swiper-banner{
		width: 100%;
		height: 100%;
		.swiper-banner-img{
			width: 750rpx;
			height: 100%;
			background-color: #F4F4F4;
			display: block;
		}
	}
	.swiper-indicator-dots{
		width: auto;
		position: absolute;
		bottom: 16rpx;
		height: 12rpx;
		left: 50%;
		transform: translateX(-50%);
		.dot{
			width: 12rpx;
			height: 12rpx;
			border-radius: 12rpx;
			background-color: rgba(255,255,255,0.5);
			float: left;
			margin: 0 4rpx;
		}
		.dot.active{
			background-color: #ffffff;
			width: 24rpx;
		}
	}
}
.middle-banner{
	width: 702rpx;
	height: auto;
	border-radius: 8rpx;
	margin-left: 24rpx;
	margin-right: 24rpx;
	background-color: transparent;
	overflow: hidden;
	&.full {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	&.round {
		border-radius: 0;
	}
	.middle-banner-img{
		width: 100%;
		height: auto;
		display: block;
	}
}
</style>
